<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
  <title>ChromoDoro Settings</title>

  <script>
    function restore_options() {
      loadSetting('work_length', 25);
      loadSetting('rest_length', 5);
      loadSettingCheckBox('show_popup', true);
      loadSettingCheckBox('play_sound', true);
      loadSettingCheckBox('calendar_sync', false);
      //loadSettingCheckBox('open_window', true);
    }
    function save_options() {
      saveSetting('work_length');
      saveSetting('rest_length');
      saveSettingCheckBox('show_popup');
      saveSettingCheckBox('play_sound');
      saveSettingCheckBox('calendar_sync');
      //saveSettingCheckBox('open_window');
    }

    function loadSetting(name, default_value) {
      document.getElementById('i_'+name).value = localStorage[name] ? localStorage[name] : default_value;
    }
    function loadSettingCheckBox(name, default_value) {
      var yes = typeof(localStorage[name]) != 'undefined' ? localStorage[name] : default_value;
      if (yes == 'true') {
        yes = true;
      } else if (yes == 'false') {
        yes = false;
      }
      document.getElementById('i_'+name).checked = yes;
    }

    function saveSetting(name) {
      localStorage[name] = document.getElementById('i_'+name).value;
    }
    function saveSettingCheckBox(name) {
      localStorage[name] = document.getElementById('i_'+name).checked == true ? 'true' : 'false';
    }

    function setIcon(radio) {
      localStorage['icon'] = radio.value;
      chrome.browserAction.setIcon({path:'chromodoro_'+localStorage['icon']+'.png'});
    }
  </script>

  <style type="text/css">
    body {
      font-family:Arial;
      padding-top:0;
    }

    body p { font-size:0.9em; }

    .submit_button {
      font-size:1.2em;
    }

    hr {
      border:none;
      border-bottom:1px dashed silver;
      width:3em;
    }

    h1 {
      color:#000;
      padding-top:55px;
      background:url('icon48.png') no-repeat top center;
    }
    .footer {
      font-size:12px;
      font-family:verdana;
      color:gray;
    }
    .footer a {
      color:gray;
    }
  </style>
</head>
<body onload="restore_options()">

<center>


  <h1><span>Chromo</span>Doro</h1>

  <form onsubmit="try {save_options();} catch(e) {console.error(e)}; return false">
    <p><label for="i_work_length">Work </label> <input id="i_work_length" type="text" size="3"/> min</p>
    <p><label for="i_rest_length">Rest </label> <input id="i_rest_length" type="text" size="3"/> min</p>
    <hr/>
    <p><input id="i_show_popup" type="checkbox" /> <label for="i_show_popup">Show Popup</label></p>
    <p><input id="i_play_sound" type="checkbox" /> <label for="i_play_sound">Play beep</label></p>
    <p><input id="i_calendar_sync" type="checkbox" /> <label for="i_calendar_sync">Sync with google calendar</label> (<a href="http://my-doings.appspot.com" target="_blank">needs permission</a>)</p>

      <!-- disabled now -->
      <div style="display:none">
        <p><input id="i_open_window" type="checkbox" /> <label for="i_open_window">Open window</label></p>
      </div>

    <hr/>
    <p>Icon
      <input onclick="setIcon(this)" type="radio" id="i_icon_path_default" name="i_rest_length" type="text"  value="default" /><label for="i_icon_path_default">
        <img src="chromodoro_default.png" />
      </label>,
      <input onclick="setIcon(this)" type="radio" id="i_icon_path_tl" name="i_rest_length" type="text"  value="tl" /><label for="i_icon_path_tl">
        <img src="chromodoro_tl.png" />
      </label>,
      <input onclick="setIcon(this)" type="radio" id="i_icon_path_gs" name="i_rest_length" type="text" value="gs" /><label for="i_icon_path_gs">
        <img src="chromodoro_gs.png" />
      </label>
    </p>
    <p><input type="submit" class="submit_button" value="Save" /></p>
  </form>

  <hr style="border-color:white"/>

  <p>ver. <span id="version">version</span></p>

  <p class="footer">

    <a href="http://code.google.com/p/chromo-doro/wiki/SupportDevelopment">support development</a>
  </p>


  <script>
    // get the plugin version from manifest
    try {
      var req = new XMLHttpRequest();
      req.open('GET', "manifest.json");
      req.onreadystatechange = function() {
        if (req.readyState == 4) {
          var manifest = eval('(' + req.responseText + ')');
          document.getElementById('version').innerHTML = manifest.version;
        }
      }
      req.send("");
    } catch (e) {
      console.log(e);
    }
  </script>



</center>
</body>
</html>
